<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div layout="row">
  <div flex="20" layout="column">
    <div class="inset">
      <h5>Policies ({{apiPoliciesCtrl.policiesToCopy.length}})</h5>
      <md-divider></md-divider>
    </div>
    <div class="gravitee-policy-draggable gravitee-policy-panel gravitee-policy-panel-left">
      <md-card
        ng-repeat="policy in apiPoliciesCtrl.policiesToCopy"
        class="gravitee-card gravitee-policy-card"
        id="{{policy.policyId}}"
        ng-cloak
      >
        <md-tooltip md-direction="right"> version: {{policy.version}} </md-tooltip>
        <md-card-content layout="row" layout-align="space-between">
          <span class="md-subhead">{{policy.name}}</span>
        </md-card-content>
      </md-card>
    </div>
  </div>

  <div flex="40" layout="column">
    <form name="editPathForm" novalidate>
      <div layout="row" layout-align="start center" class="gravitee-policy-filters">
        <span
          flex
          class="badge gravitee-policy-method-badge-filter"
          ng-class="apiPoliciesCtrl.getHttpMethodClass(httpMethod, apiPoliciesCtrl.httpMethodsFilter)"
          ng-repeat="httpMethod in apiPoliciesCtrl.httpMethods"
          ng-click="apiPoliciesCtrl.toggleHttpMethod(httpMethod, apiPoliciesCtrl.httpMethodsFilter)"
        >
          {{httpMethod | uppercase}}
        </span>
      </div>
      <md-divider></md-divider>
      <div class="gravitee-policy-panel gravitee-policy-panel-center">
        <v-accordion class="vAccordion--default" multiple>
          <v-pane ng-repeat="path in apiPoliciesCtrl.sortedPaths()" expanded="$first">
            <v-pane-header>
              <h3 class="gravitee-policy-path" ng-if='path === "/"'>{{path}}</h3>
              <div ng-if='path !== "/"' layout="row" layout-align="space-between center">
                <div flex="90">
                  <md-input-container style="margin: 0; width: 100%">
                    <input
                      ng_model="path"
                      name="path{{$index}}"
                      class="gravitee-policy-path"
                      required
                      aria-label="path"
                      ui-validate="{
                            pathAlreadyExists : 'apiPoliciesCtrl.pathNotExists($value, $index)',
                            mustStartWithSlash : 'apiPoliciesCtrl.pathStartWithSlash($value)'
                         }"
                      ng-keydown="apiPoliciesCtrl.pathKeyPress($event, editPathForm['path'+$index], path, $index)"
                      ng-blur="apiPoliciesCtrl.restoreOldPath($index, editPathForm['path'+$index])"
                      ng-click="$event.stopPropagation();"
                    />
                    <div ng-messages="editPathForm['path'+$index].$error" ng-show="editPathForm['path'+$index].$dirty">
                      <div ng-message="required">This is required!</div>
                      <div ng-message="pathAlreadyExists">This path is already configured.</div>
                      <div ng-message="mustStartWithSlash">The path must start with /</div>
                    </div>
                  </md-input-container>
                </div>
                <div style="margin-right: 15px">
                  <ng-md-icon
                    icon="delete"
                    style="fill: #757575"
                    size="18px"
                    ng-click="apiPoliciesCtrl.removePath(path);$event.stopPropagation();"
                  >
                    <md-tooltip md-direction="right"> Remove path </md-tooltip>
                  </ng-md-icon>
                </div>
              </div>
            </v-pane-header>
            <v-pane-content>
              <div ng-class="apiPoliciesCtrl.getDropzoneClass(path)" data-path="{{path}}">
                <md-card
                  ng-repeat="policy in apiPoliciesCtrl.apiPoliciesByPath[path]"
                  ng-click="apiPoliciesCtrl.editPolicy($index, path, $event)"
                  ng-hide="apiPoliciesCtrl.filterByMethod(policy)"
                  class="gravitee-card gravitee-policy-card"
                  ng-class="apiPoliciesCtrl.getApiPolicyClass(policy)"
                  layout="row"
                  layout-align="space-between start"
                >
                  <md-card-content layout="column" layout-align="start start" layout-fill>
                    <div ng-if="!policy.name" layout="column" layout-align="start start">
                      <span class="md-subhead">Unknown policy</span>
                      <i>Please check that the policy '{{policy.policyId}}' is installed in plugins</i>
                    </div>
                    <span class="md-subhead">{{policy.name}}</span>
                    <span class="gravitee-policy-card-description">{{policy.description}}</span>
                    <div
                      ng-class="{'gravitee-policy-card-method': policy.description}"
                      layout="row"
                      layout-align="start center"
                      layout-fill
                    >
                      <div ng-switch="policy.methods.length === apiPoliciesCtrl.httpMethods.length">
                        <span
                          class="badge gravitee-policy-method-badge-info gravitee-policy-method-badge-GET-selected"
                          ng-switch-when="true"
                          >ALL</span
                        >
                        <span
                          class="badge gravitee-policy-method-badge-info gravitee-policy-method-badge-{{method}}-selected"
                          ng-switch-when="false"
                          ng-repeat="method in policy.methods"
                          >{{method | uppercase}}</span
                        >
                      </div>
                    </div>
                  </md-card-content>
                  <div layout="column" permission permission-only="'api-definition-u'">
                    <ng-md-icon
                      icon="close"
                      style="fill: #757575"
                      size="18px"
                      class="gravitee-card-close"
                      ng-click="apiPoliciesCtrl.removePolicy($index, path, $event)"
                    >
                      <md-tooltip md-direction="right"> Remove policy </md-tooltip>
                    </ng-md-icon>
                    <ng-md-icon
                      ng-if="policy.name"
                      icon="mode_edit"
                      style="fill: #757575"
                      size="18px"
                      class="gravitee-card-close"
                      ng-click="apiPoliciesCtrl.editPolicyDescription($index, path, $event)"
                    >
                      <md-tooltip md-direction="right"> Edit policy description </md-tooltip>
                    </ng-md-icon>
                    <ng-md-icon
                      icon="done"
                      ng-if="policy.enabled"
                      style="fill: #437536"
                      size="18px"
                      class="gravitee-card-close"
                      ng-click="apiPoliciesCtrl.switchPolicyEnabled($index, path, $event)"
                    >
                      <md-tooltip md-direction="right"> Policy is enabled. Click to disable it. </md-tooltip>
                    </ng-md-icon>
                    <ng-md-icon
                      icon="pause_circle_outline"
                      ng-if="!policy.enabled"
                      style="fill: #751c16"
                      size="18px"
                      class="gravitee-card-close"
                      ng-click="apiPoliciesCtrl.switchPolicyEnabled($index, path, $event)"
                    >
                      <md-tooltip md-direction="right"> Policy is disabled. Click to enable it. </md-tooltip>
                    </ng-md-icon>
                  </div>
                </md-card>
              </div>
              <span ng-if="apiPoliciesCtrl.initDragularDropZone(path)"></span>
            </v-pane-content>
          </v-pane>
        </v-accordion>
      </div>
    </form>
  </div>

  <div flex layout="column">
    <div ng-if="apiPoliciesCtrl.selectedApiPolicy.policyId">
      <div class="inset">
        <div layout="row" layout-align="space-between center">
          <h5>{{policy.name}}</h5>
        </div>
        <md-divider></md-divider>
      </div>
      <div layout="row" layout-align="start center" layout-wrap>
        <span
          flex="10"
          class="badge gravitee-policy-method-badge-info"
          ng-class="apiPoliciesCtrl.getHttpMethodClass(httpMethod, apiPoliciesCtrl.selectedApiPolicy.methods)"
          ng-repeat="httpMethod in apiPoliciesCtrl.httpMethods"
          ng-click="apiPoliciesCtrl.toggleHttpMethod(httpMethod, apiPoliciesCtrl.selectedApiPolicy.methods)"
        >
          {{httpMethod | uppercase}}
        </span>
      </div>
      <div class="gravitee-policy-panel gravitee-policy-panel-right">
        <form
          name="policyConfigurationForm"
          sf-schema="policyJsonSchema"
          sf-form="policyJsonSchemaForm"
          sf-model="apiPoliciesCtrl.selectedApiPolicy[apiPoliciesCtrl.selectedApiPolicy.policyId]"
          sf-options="{ validateOnRender: true, formDefaults: { startEmpty: true } }"
          novalidate
        ></form>

        <div ng-if="apiPoliciesCtrl.schemaByPolicyId[apiPoliciesCtrl.selectedApiPolicy.policyId]">
          <md-divider></md-divider>
          <md-button
            permission
            permission-only="'api-definition-u'"
            class="md-raised"
            ng-disabled="!apiPoliciesCtrl.httpMethodsUpdated && (policyConfigurationForm.$invalid || policyConfigurationForm.$pristine)"
            ng-click="apiPoliciesCtrl.savePaths();"
            >Save
          </md-button>
        </div>
      </div>
    </div>
  </div>
</div>

<md-button
  permission
  permission-only="'api-definition-d'"
  class="md-fab md-mini md-fab-bottom-right gravitee-policy-migration-button"
  aria-label="Update to Policy studio"
  ng-click="apiPoliciesCtrl.migrateApiToPolicyStudio()"
>
  <ng-md-icon icon="queue_play_next"></ng-md-icon>
  <md-tooltip md-direction="top"> Migrate API to Policy Studio </md-tooltip>
</md-button>

<md-button
  permission
  permission-only="'api-definition-d'"
  class="md-fab md-fab-bottom-right"
  aria-label="Add"
  ng-click="apiPoliciesCtrl.showAddPathModal($event)"
>
  <ng-md-icon icon="add"></ng-md-icon>
  <md-tooltip md-direction="top"> Add a path </md-tooltip>
</md-button>
